CandlestickChart for ASP.NET Web Forms
ローソク足チャートを作成する
ローソク足チャートのタイプ > ローソク足チャートを作成する

ローソク足チャートは、設計時でもソースビューでも作成できます。このトピックは、適切な参照と C1CandlestickChart コントロールが新しいアプリケーションに追加されていることを前提とします。"Candlestick" がデフォルトのグラフタイプです。

 

設計時の場合

  1. C1CandlestickChart コントロールを選択して、コントロールのプロパティウィンドウを開きます。
  2. Type プロパティを Appearance プロパティから探します。
  3. タイプをチェックして、"Candlestick" が選択されていることを確認します。これはデフォルトのグラフタイプなので、自動的に選択されます。
  4. クイックスタートの手順2と同様に、SeriesList データを追加します。ローソク足チャートの場合は、高値、安値、始値、終値、および X 値が必要です。
  5. ChartStyle オプションを使用して、チャートをカスタマイズします。
  6. アプリケーションを実行します。

ソースビューの場合

次のマークアップを使用して、ソースビューでローソク足チャートを作成およびカスタマイズできます。チャート要素には色と幅が設定されています。

ソースビュー
コードのコピー
<cc1:C1CandlestickChart ID="C1CandlestickChart1" runat="server" Type="Candlestick">
     <CandlestickChartSeriesStyles>
         <cc1:CandlestickChartStyle>
             <HighLow Fill-Color="#ff9900" Width="2"></HighLow>
             <FallingClose Fill-Color="#ff0000" Width="6"></FallingClose>
             <RaisingClose Fill-Color="#ff9900" Width="6"></RaisingClose>
         </cc1:CandlestickChartStyle>
     </CandlestickChartSeriesStyles>   
     <SeriesList>
         <cc1:CandlestickChartSeries LegendEntry="True" Label="Values">
             <Data>
                 <High DoubleValues="10, 12, 11, 14, 16, 20, 18, 17" />
                 <Low DoubleValues="7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10" />
                 <Open DoubleValues="8,8.6,11,6.2,13.8,15,14,12"></Open>
                 <Close DoubleValues="8.6,11,6.2,13.8,15,14,12,10"></Close>
                 <X>
                     <Values>
                         <cc1:ChartXData DateTimeValue="2014-03-07" />
                         <cc1:ChartXData DateTimeValue="2014-03-08" />
                         <cc1:ChartXData DateTimeValue="2014-03-09" />
                         <cc1:ChartXData DateTimeValue="2014-03-10" />
                         <cc1:ChartXData DateTimeValue="2014-03-11" />
                         <cc1:ChartXData DateTimeValue="2014-03-12" />
                         <cc1:ChartXData DateTimeValue="2014-03-13" />
                         <cc1:ChartXData DateTimeValue="2014-03-14" />
                     </Values>
                 </X>
            </Data>
         </cc1:CandlestickChartSeries>
     </SeriesList>           
 </cc1:C1CandlestickChart>
関連トピック